import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Spin } from 'antd';

import MTableStyle from './mTable.scss';

class MTable extends Component {
    static propTypes = {
        columns: PropTypes.array.isRequired,
        dataSource: PropTypes.array,
        spinning: PropTypes.bool,
        delay: PropTypes.number,
        scroll: PropTypes.object
    };
    static defaultProps = {
        dataSource: [],
        spinning: false,
        delay: 500
    };
    render() {
        const { columns, dataSource, scroll } = this.props;
        const ths = <tr>{
            columns.map((val, index) => {
                return <th key={val.dataIndex || val.key || index }>{val.title}</th>;
            })
        }</tr>;

        let tds = dataSource.map((val, index) => {
            return (
                <tr key={index}>{
                    columns.map((val2, index2) => {
                        let dataIndex = val2.dataIndex || index2;
                        const record = val;
                        const text = record[dataIndex];
                        const ele = typeof val2.render === 'function' ? val2.render(text, record, dataIndex) : text;
                        return <td style={val2.style} width={val2.width} align={val2.align} key={`${index}.${dataIndex}`}>{ele}</td>
                    })
                }</tr>
            );
        });
        if (dataSource.length == 0) {
            tds = <tr><td colSpan={columns.length} align="middle">暂无数据</td></tr>
        }

        //支持表格部分多余部分垂直滚动
        if (scroll && scroll.y > 0) {
            let hidden_style = { visibility: 'hidden' };
            return (
                <div className={MTableStyle['table-wrap']}>
                    <Spin tip="loading" spinning={this.props.spinning} delay={150}>
                        <div className={MTableStyle['head-wrap']}>
                            <table cellSpacing="0" cellPadding="0" border="0">
                                <thead>
                                    {ths}
                                </thead>
                                <tbody style={hidden_style}>
                                    {tds}
                                </tbody>
                            </table>
                        </div>
                        <div className={MTableStyle['body-wrap']} style={{ height: scroll.y }}>
                            <table cellSpacing="0" cellPadding="0" border="0">
                                <tbody>
                                    {tds}
                                </tbody>
                            </table>
                        </div>
                    </Spin>
                </div>
            );
        } else {
            return (
                <div className={MTableStyle['table-wrap']}>
                    <Spin tip="loading" spinning={this.props.spinning} delay={150}>
                        <table cellSpacing="0" cellPadding="0" border="0">
                            <thead>
                                {ths}
                            </thead>
                            <tbody>
                                {tds}
                            </tbody>
                        </table>
                    </Spin>
                </div>
            );
        }
    }
}

export default MTable;